<template>
  <el-dropdown>
    <span class="el-dropdown-link"> 事件更新 </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="updateEvent" v-if="isActice"
          >开始更新</el-dropdown-item
        >
        <el-dropdown-item disabled v-else>开始更新</el-dropdown-item>
        <el-dropdown-item @click="cancelClick">停止更新</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <div id="update-popup" class="update-popup">
    <a href="#" id="update-popup-closer" class="update-popup-closer"></a>
    <div class="title">
      <span>事件详细信息</span>
    </div>
    <div class="main">
      <table>
        <tr v-for="(item, index) in eventInfo" :key="index">
          <td>{{ title[index] }}</td>
          <td>{{ item }}</td>
        </tr>
        <tr>
          <td>处理状态</td>
          <td class="select">
            <el-select size="small" v-model="handlingStatus">
              <el-option label="待处理" value="0" />
              <el-option label="处理中" value="1" />
              <el-option label="已归档" value="2" />
            </el-select>
          </td>
        </tr>
      </table>
    </div>
    <div class="btn-box">
      <el-button type="primary" @click="enterUpdate">确认</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { Point } from '../../../../utils/Point';
import { update } from './Hooks/useupdate';

const $map = ref(null);
const eventInfo = ref([]);
const title = [
  '事件编号',
  '事件类型',
  '事件等级',
  '发生时间',
  '发生地点',
  '车牌号',
  '驾驶员',
];
const handlingStatus = ref('待处理');
const isActice = ref(true);

onMounted(() => {
  $map.value = inject('$map');
});

const updateEvent = () => {
    $map.value.on('click', handleClickUpdate)
    isActice.value = false
}
const cancelClick = () => {
    $map.value.un('click', handleClickUpdate)
    isActice.value = true
}

const handleClickUpdate = (e) => {
    const position = e.coordinate;
    const service = {
        name: 'guanggu',
        layerId: 2,
    };
    Point.query({
        position: position,
        service,
        callback: handleQuery,
    });
}
const popup = ref(null)
const position = ref(null)
const fid = ref('')
const handleQuery = (result) => {
  if (result.SFEleArray.length === 0) {
    return;
  }
  position.value = Object.values(result.SFEleArray[0].fGeom.PntGeom[0].Dot);
  fid.value = result.SFEleArray[0].FID;
  //用于popup展示的事件信息
  eventInfo.value = result.SFEleArray[0].AttValue.slice(0, 7);
  switch (eventInfo.value[2]) {
    case '1':
      eventInfo.value[2] = '轻微事故';
      break;
    case '2':
      eventInfo.value[2] = '一般事故';
      break;
    case '3':
      eventInfo.value[2] = '重大事故';
      break;
    case '4':
      eventInfo.value[2] = '特大事故';
      break;
  }
  handlingStatus.value = result.SFEleArray[0].AttValue[7];
  // 将popup转换成overlay
  var container = document.getElementById('update-popup');
  var closer = document.getElementById('update-popup-closer');
  popup.value = new ol.Overlay({
    element: container,
    autoPan: true,
    positioning: 'bottom-center',
    stopEvent: true,
    autoPanAnimation: {
      duration: 250,
    },
  });
  $map.value.addOverlay(popup.value);
  popup.value.setPosition(position.value);
  container.style.display = 'block';

  //添加关闭按钮的单击事件（隐藏popup）
  closer.onclick = function () {
    popup.value.setPosition(undefined);
    //失去焦点
    closer.blur();
    return false;
  };
};

const enterUpdate = () => {
  const service = {
    name: 'guanggu',
    layerId: 2,
  };
  //子图颜色
  const color = ref(6);
  switch (handlingStatus.value) {
    case '1':
      color.value = 4;
      break;
    case '2':
      color.value = 7;
      break;
  }
  const attr = [
    {
      name: '处理状态',
      type: 'string',
      value: handlingStatus.value,
    },
  ];
  update({
    fid: fid.value,
    position: position.value,
    attr,
    color: color.value,
    service,
    callback: handleUpdate,
  });
};
const handleUpdate = () => {
  const layers = $map.value.getLayers().getArray();
  if (layers.length > 0) {
    //获取光谷图层 刷新该图层
    const layer = layers.filter((item) => item.name === 'guanggu');
    layer[0].refresh();
  }
  popup.value.setPosition(undefined);
};
const cancel = () => {
    if (popup.value) {
        popup.value.setPosition(undefined);
    }
}

</script>

<style lang="scss" scoped>
.el-dropdown {
  height: 100%;
  display: flex;
  align-items: center;
  color: #131313;
  font-size: 16px;

  :deep(:focus-visible) {
    outline: none !important;
  }
}

.update-popup {
  position: absolute;
  width: 340px;
  background-color: white;
  padding-bottom: 18px;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  border: 1px solid #cccccc;
  border-radius: 5px;
  bottom: 45px;
  display: none;
  left: -50px;
  z-index: 999;

  &:after,
  &:before {
    top: 100%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }

  &:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }

  .update-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
  }

  .update-popup-closer:after {
    content: '✖';
  }

  .title {
    background-color: #2196f3;
    padding: 4px 5px;
    font-size: 15px;
    color: #fff;
    border-radius: 5px 5px 0 0;
  }
}

.main {
  padding: 10px;
  font-size: 15px;

  table {
    display: flex;
    flex-direction: column;
    width: 100%;

    tr {
      display: flex;

      td {
        padding: 7px 15px;
        border: 1px solid #ededed;

        &:first-child {
          color: #656565;
          font-weight: 600;
          width: 40%;
        }

        &:last-child {
          width: 60%;
        }
      }
    }
  }

  .select {
    padding: 0;

    .el-select {
      display: inline-block;
      width: 100%;
      height: 100%;

      :deep(.select-trigger) {
        display: flex;
        height: 100%;
      }
    }
  }
}

.btn-box {
  padding: 0 10px;
  display: flex;
  justify-content: center;
}
</style>
